<template>
  <div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width: 100%; max-width: 1200px">
        <div class="content">
          <div class="right-box">
            <!-- menu栏 -->
            <m-Menu activeDefault="3"></m-Menu>
            <!--  -->
          </div>
          <div class="left-box" v-loading="$store.state.isLoading">
            <div class="top">
              <div class="title">练习记录</div>
              <el-divider></el-divider>
              <div class="search">
                <span class="label">班级</span>
                <el-select
                  v-model="className"
                  placeholder="请选择班级"
                  class="input"
                >
                  <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <span class="label name">姓名</span>
                <el-input
                  v-model.trim="studentName"
                  placeholder="请输入学生姓名"
                  class="input"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  plain
                  class="btn"
                  @click="handleStatisticList(true)"
                  style="margin-left: 20px; background: #1968fa; color: #fff"
                  >查询</el-button
                >
              </div>
            </div>
            <div class="bottom">
              <el-table
                :data="tableData"
                style="width: 100%; margin-top: 30px; min-height: 300px"
                :header-cell-style="{ background: '#E4EEFF', color: '#333333' }"
              >
                <el-table-column
                  prop="studentName"
                  label="姓名"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="practiceNum"
                  label="练习次数"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="completeNum"
                  label="练题总数量"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="latestLearnTime"
                  label="最后练习时间"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="280" align="center">
                  <template slot-scope="scope">
                    <span
                      style="color: #1968fa; cursor: pointer"
                      @click="handleGoUrl(scope.row)"
                      >详情</span
                    >
                  </template>
                </el-table-column>
                <div slot="empty" class="empty">
                  <img src="../../assets/images/empty.png" alt="" />
                  <span class="text"> 暂无练习记录 </span>
                </div>
              </el-table>
              <div class="clearfix">
                <el-pagination
                  class="pull-right"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total,prev,pager,next,sizes,jumper"
                  :total="totalCount"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import { STATUS_CODE_OK } from "@/config";
import { statisticList, getSelectClassList } from "@/api/personalCenter";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
import MMenu from "@/components/MMenu.vue";
export default {
  name: "TeacherRecord",
  data() {
    return {
      isPageShow: true, //页面是否显示
      studentName: "",
      className: "",
      input: "",
      tableData: [],
      options: [],
      value: "",
      currentPage: 1, // 页数
      pageSize: 5, // 条数
      totalCount: 0, // 总条数
    };
  },
  async created() {
    await this.handleGetSelectClassList();
    this.handleStatisticList();
  },
  methods: {
    // 路由跳转
    handleGoUrl(item) {
      this.$router.push({
        name: "studentRecord",
        params: { row: item },
      });
    },
    // 获取班级列表
    async handleGetSelectClassList() {
      let { data } = await getSelectClassList();
      if (data.code == STATUS_CODE_OK) {
        this.options = data.data;
        this.className = this.options[0];
      }
    },
    // 练习记录数据获取
    async handleStatisticList(isReFresh = false) {
      if (!this.className) {
        this.$notify({
          title: "提示",
          message: "请选择班级!",
          type: "warning",
        });
        return;
      }
      if (isReFresh) {
        this.currentPage = 1;
      }
      let { data } = await statisticList({
        studentName: this.studentName,
        className: this.className,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      if (data.code == STATUS_CODE_OK) {
        this.tableData = data.data.records;
        this.totalCount = Number(data.data.total);
      }
    },
    // 分页页数改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleStatisticList(true);
    },
    // 分页当前页改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleStatisticList();
    },
  },
  components: {
    // MHeader,
    // MFotter,
    MMenu,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
::v-deep .el-menu {
  min-height: 600px;
}
.empty {
  display: flex;
  padding: 30px;
  height: 300px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  img {
    width: 250px;
    height: 250px;
  }
}
.input {
  width: 220px;
  margin-left: 20px;
}

.dialog-box {
  .pdf-box {
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: center;
    .pdf {
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  }
  .dialog-video {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
}
.wrap {
  background-color: $bg-color;
  .container {
    padding-bottom: 90px;
    .content {
      width: 100%;
      display: flex;
      margin-top: 30px;
      justify-content: space-between;
      .right-box {
        flex: 0.2;
        border-radius: 10px 10px 10px 10px;
        .el-menu {
          border-right: none;
        }
      }
      .left-box {
        flex: 0.8;
        margin: 0px 0px 0px 20px;
        padding: 0px 0px 0px 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px 10px 10px 10px;
        .top {
          .title {
            padding: 20px 0px 0px 0px;
            font-size: 18px;
          }
          .search {
            .name {
              margin-left: 20px;
            }
            .btn {
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
